<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dataItem.machineName || ''}-点位数据`"
		width="1100px"
		:append-to-body="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div ref="box1">
			<searchBar
				ref="searchBar"
				:default-list="checkArr"
				:option-list="optionList"
				@on-return="onReturn"
			></searchBar>
			<div class="flex-end-center-wrap margin-bottom-4 margin-top-10">
				<jk-date-picker v-model="searchParams.belongDate" type="datetimerange" class="item-gap"></jk-date-picker>
				<jk-search-button @click="onSearchBtn"></jk-search-button>
			</div>
		</div>
		<jk-table
			ref="jkTable"
			:loading="tableLoading"
			class="width-100-percent"
			:data="tableData"
			border
			highlight-hover-row
			highlight-current-row
			:height="dialogTableHeight - 80"
		>
			<vxe-table-column type="seq" title="序号" align="center" :width="50"></vxe-table-column>
			<vxe-column
				v-for="(item, index) in tableHeader || []"
				:key="index"
				:title="item.value"
				:align="item.align"
				:field="item.key"
				:min-width="item.minWidth"
				:width="item.width"
			>
				<template slot-scope="scope">
					<el-tag v-if="item.keyName === 'deviceRecordNumber'" type="primary">{{ scope.row.deviceRecordNumber }}</el-tag>
					<span v-else>{{ scope.row[item.key] }}</span>
				</template>
			</vxe-column>
		</jk-table>
	</jk-dialog>
</template>

<script>
    import calTableHeight from '../../../mixins/cal-dialog-height';
    import { productionIotMachineCollectionDataListByTime } from '../../../api/equipmentMonitoring';
    import searchBar from './components/search-bar';
    export default {
        mixins: [calTableHeight],
        components: {
            searchBar
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            },
            dataItem: {
                type: Object,
                default() {
                    return {
                        collectDataList: []
                    };
                }
            }
        },
        data() {
            return {
                checkArr: [],
                showDialog: false,
                tableLoading: true,
                saveBtnLoading: false,
                searchParams: {
                    endDataTime: '',
                    startDataTime: '',
                    uid: '',
                    signalId: '',
                    dateType: '',
                    belongDate: []
                },
                tableHeader: [],
                tableData: [],
                selectData: {}
            };
        },
        methods: {
            onReturn(signalList, dateRange) {
                this.checkArr = signalList;
                this.$set(this.searchParams, 'belongDate', dateRange);
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.getListRequest();
            },
            getListRequest() {
                if (!this.searchParams.belongDate || !this.searchParams.belongDate.length) return;
                this.tableLoading = true;
                const params = {
                    signalIds: this.checkArr.map(x => x.signalId),
                    uid: this.dataItem.uid,
                    startDataTime: this.searchParams.belongDate[0],
                    endDataTime: this.searchParams.belongDate[1]
                };
                this.tableHeader = [];// 解决有时，部分列名不显示的问题, 如：先任意选择一个点位，再选择"总电能"搜索,然后再删除其他点位后搜索，总电能的值显示不出来
                return productionIotMachineCollectionDataListByTime(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        this.tableData = resData.tableData ? resData.tableData.map(x => x) : [];
                        this.tableHeader = resData.tableHeader ? resData.tableHeader.map(x => x) : [];
                    }
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getListRequest();
                this.tableLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.checkArr = this.dataItem ? [{ signalId: this.dataItem.signalId, signalName: this.dataItem.signalName }] : [];
                    this.$nextTick(() => {
                        this.$refs.searchBar.splitTime();
                        this.getDependentData();
                    });
                }
            }
        }
    };
</script>
<style scoped lang="scss">
// 解决在生产订单编辑页打开时全局的margin-bottom-10被覆盖的问题
.margin-bottom-10 {
  margin-bottom: 10px;
}

.el-descriptions {
  padding: 10px 90px;
}

.margin-t-b {
  margin: 10px 0px 10px 0px;
}
</style>
